<template>
  <div class="car_conter">
    <div class="isshow" v-if="!cartInfoList.length">
      <div class="car_header"></div>
      <div class="car_bgimg">
        <img src="http://yanxuan.nosdn.127.net/3a6c77d8463d8675f4a0a0c80dbe4391.png" alt="">
        <div>去添加点什么吧</div>
      </div>
    </div>
    <div class="show" v-else>
      <div class="exchange">
        <!-- 全场换购 -->
        <div class="exchange_header">
          <p>全场换购</p> <span>已满0.01元，可选择10件商品换购 <a href="javascript;;" style="color: red;"> 去换购></a></span>
        </div>
        <ul>
          <van-swipe :loop="false" :width="230">
            <van-swipe-item>
              <li class="exchange_li">
                <img class="exchange_bgimg"
                  src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146"
                  alt="">
                <div class="exchange_smbox">
                  <span class="exchange_text" s>江南特产，西湖藕粉 原味 20克*15袋</span>
                  <span class="exchange_title">原味藕粉 20克*15袋</span>
                  <div>换购价 <span style="color: #fa2639; font-size: 16px; font-weight: bold;">20.8</span> <span
                      style="color: #e2e2e2; text-decoration: line-through;">25</span>
                    <img src="https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png" alt="">
                  </div>
                </div>
              </li>
            </van-swipe-item>
            <van-swipe-item>
              <li class="exchange_li">
                <img class="exchange_bgimg"
                  src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146"
                  alt="">
                <div class="exchange_smbox">
                  <span class="exchange_text" s>江南特产，西湖藕粉 原味 20克*15袋</span>
                  <span class="exchange_title">原味藕粉 20克*15袋</span>
                  <div>换购价 <span style="color: #fa2639; font-size: 16px; font-weight: bold;">20.8</span> <span
                      style="color: #e2e2e2; text-decoration: line-through;">25</span>
                    <img src="https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png" alt="">
                  </div>
                </div>

              </li>
            </van-swipe-item>
            <van-swipe-item>
              <li class="exchange_li">
                <img class="exchange_bgimg"
                  src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146"
                  alt="">
                <div class="exchange_smbox">
                  <span class="exchange_text" s>江南特产，西湖藕粉 原味 20克*15袋</span>
                  <span class="exchange_title">原味藕粉 20克*15袋</span>
                  <div>换购价 <span style="color: #fa2639; font-size: 16px; font-weight: bold;">20.8</span> <span
                      style="color: #e2e2e2; text-decoration: line-through;">25</span>
                    <img src="https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png" alt="">
                  </div>
                </div>

              </li>
            </van-swipe-item>
            <van-swipe-item>
              <li class="exchange_li">
                <img class="exchange_bgimg"
                  src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146"
                  alt="">
                <div class="exchange_smbox">
                  <span class="exchange_text" s>江南特产，西湖藕粉 原味 20克*15袋</span>
                  <span class="exchange_title">原味藕粉 20克*15袋</span>
                  <div>换购价 <span style="color: #fa2639; font-size: 16px; font-weight: bold;">20.8</span> <span
                      style="color: #e2e2e2; text-decoration: line-through;">25</span>
                    <img src="https://yanxuan.nosdn.127.net/static-union/1666000321e4ed50.png" alt="">
                  </div>
                </div>

              </li>
            </van-swipe-item>
            <template #indicator="{ active, total }">
              <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
          </van-swipe>
        </ul>
      </div>

      <!-- 购物车 -->
      <div class="gocar">
        <div class="gocar_header">
          <van-checkbox v-model="checkedAll" :checked="checkedAllss" checked-color="red" style="margin-left: 10px;"
            @click="FallisChacked()">
            99元包邮</van-checkbox>
          <div> <span style="font-size: 12px;color: #959795;">已满99元包邮</span> <a href="javascripy:;">去逛逛></a></div>
        </div>
        <div v-for="item in cartInfoList">
          <van-swipe-cell>
            <van-checkbox v-model="item.isChecked" checked-color="red" style="margin-left: 10px;"
              @click="setIck(item.skuId, item.isChecked)"> </van-checkbox>
            <van-card :price="item.skuPrice" :origin-price="item.skuPrice + 200" :title="item.skuName" class="goods-card"
              :thumb="item.imgUrl">
              <template #tags>
                <van-button size="mini" @click="Reselect">8G+128G</van-button>
              </template>
              <template #footer>
                <van-button v-show="isNum" size="mini" style="border-radius: 50%;" @click="isNum = false">x{{
                  item.skuNum
                }}</van-button>
                <van-stepper v-show="!isNum" v-model="item.skuNum" theme="round" button-size="22" disable-input
                  @plus="addNUm(item.skuId)" @minus="subNUm(item.skuId)" />
              </template>
            </van-card>
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" @click="DeleteisChecked(item.skuId)" />
            </template>
          </van-swipe-cell>
        </div>
      </div>

      <div style="width: 100%;height: 10px; margin-top: 150px;"></div>
    </div>

    <div class="car_vip">
      <div><img src="https://yanxuan.nosdn.127.net/98e742f093afd67b52fd085f41179572.png" alt="">
        <span>开通Pro会员，享天天免邮</span>
      </div>
      <span><a href="" style="margin-right: 20px; color: red;">立即开通></a></span>
    </div>
    <div class="jiesuan">
      <van-submit-bar :price="total" button-text="结算" @submit="onSubmit">
        <van-checkbox v-model="checkedAllss" checked-color="red" @click="FallisChacked()">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <van-action-sheet v-model:show="show" :round=false>
      <div class="content">
        <div class="content_img">
          <img
            src="https://yanxuan-item.nosdn.127.net/2871b8bc3fecfd76c5e1f0c2def9cdbe.png?imageView&thumbnail=176x176&quality=35"
            alt="">
          <div style="display: flex; flex-direction: column;margin-top: 50px; margin-left: 10px;">
            <div style="color: red; line-height: 20px;">价格:¥<i>149</i></div>
            <div>已选择: 2瓶囤货装</div>
          </div>
        </div>
        <div class="content_list">
          <p style="font-size: 14px;">规格</p>
          <ul>
            <li class="active">50g</li>
            <li>两瓶囤货装</li>
            <li>两瓶囤</li>
          </ul>
        </div>
        <div class="content_list">
          <p style="font-size: 14px;">规格</p>
          <ul>
            <li class="active">50g</li>
            <li>两瓶囤货装</li>
            <li>两瓶囤</li>
          </ul>
        </div>
        <div class="content_listnum">
          <p style="font-size: 14px;">数量</p>
          <van-stepper v-model="value" input-width="60px" button-size="40px" />
        </div>

      </div>
      <div class="content_bigbutton" @click="qeuding">
        确定
      </div>
    </van-action-sheet>
  </div>
  <BackTopTo></BackTopTo>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
// 路由
import { useRouter } from "vue-router";
import userCar from '../../api/useCart'
import type { cartInfoList } from '../../api/useCart'
import { ElMessage } from 'element-plus';
const router = useRouter()

const checkedAll = ref(false)
const value = ref(1)
const checkboxGroup = ref();
const show = ref(false)
const isNum = ref(true)
const cartInfoList = ref<cartInfoList[]>([])
const checkAll = () => {
  checkboxGroup.value.toggleAll(true);
}
const toggleAll = () => {
  checkboxGroup.value.toggleAll();
}

const onSubmit = () => {
  //跳转页面
  router.push('/payOrder')
}
const Reselect = () => {
  show.value = true
}

const qeuding = () => {
  show.value = false
}
let checkedAllss = computed(
  {
    get: () => {
      return cartInfoList.value.every(item => item.isChecked)
    },
    set: (v) => {
      console.log(v);

    }
  }
)
let total = computed(() => {

  return cartInfoList.value.reduce((pre, ace) => {
    return pre + ace.skuPrice * ace.skuNum * ace.isChecked;
  }, 0) * 100;

})

const GetCartList = async () => {
  try {
    let res = await userCar.GetCartList()
    cartInfoList.value = res[0].cartInfoList
  } catch (error) {
    console.log(error);

  }
}
const addNUm = async (skuId: number) => {
  try {
    let res = await userCar.PostAddToCart(skuId, 1)
  } catch (error) {
    console.log(error);
  }
}
const subNUm = async (skuId: number) => {
  try {
    let res = await userCar.PostAddToCart(skuId, -1)
  } catch (error) {
    console.log(error);
  }
}
const DeleteisChecked = async (skuId: number) => {
  try {
    let res = await userCar.DeleteisChecked(skuId)
    GetCartList()

  } catch (error) {
    console.log(error);
  }
  GetCartList()

}
const setIck = async (skuId: number, Checked: number) => {
  let isChecked = Checked == 1 ? 1 : 0
  try {
    let res = await userCar.GETisChecked(skuId, isChecked)
  } catch (error) {
    console.log(error);

  }
}
const FallisChacked = async () => {
  let isChecked = checkedAllss.value ? 0 : 1
  let idList: number[] = [];
  cartInfoList.value.forEach((cardid) => {
    idList.push(cardid.skuId);
  });
  try {
    let res = await userCar.PostBatchCheckCart(isChecked, idList)
    GetCartList()
  } catch (error) {
    console.log(error);

  }
}
onMounted(() => {
  GetCartList()

})
</script>

<style scoped lang="less">
.car_conter {

  width: 375px;
  background: #f4f4f4;
  min-height: 667px;
  padding: 0 10px;
  box-sizing: border-box;

  .isshow {
    width: 100%;

    .car_header {
      width: 100%;
      height: 40px;
    }

    .car_bgimg {
      width: 100%;
      height: 400px;
      background: #fff;

      img {
        width: 100%;
      }

      div {
        line-height: 20px;
        font-size: 14px;
        text-align: center;
        color: #959795;
      }
    }
  }


  .show {
    width: 100%;
    padding-top: 10px;

    .exchange {
      width: 100%;
      height: 146px;
      background: #fff;
      border-radius: 10px;

      .exchange_header {
        display: flex;
        justify-content: space-between;
        width: 335px;
        padding: 0 10px;

        p {
          font-size: 16px;
          font-weight: bold;
        }

        span {
          font-size: 12px;
          line-height: 53px;

        }
      }

      ul {
        width: 335px;
        height: 70px;
        padding: 0 10px;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;

        .custom-indicator {
          position: absolute;

        }

        .exchange_li {
          width: 215px;
          margin-right: 10px;
          height: 70px;
          background: #fafafa;
          border-radius: 10px;
          display: flex;

          .exchange_bgimg {
            width: 70px;
            height: 70px;
            background: #f4f4f4;
            margin-right: 10px;
            border-radius: 10px;

          }

          .exchange_smbox {
            width: 140px;
            height: 70px;
            font-size: 12px;
            display: flex;
            flex-direction: column;

            .exchange_text {
              width: 140px;
              height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .exchange_title {
              height: 30px;
              line-height: 30px;
            }

            div {
              display: flex;
              justify-content: space-between;
              color: #fab6bb;

              img {
                width: 20px;
                height: 20px;
              }
            }
          }
        }
      }
    }

    .gocar {
      background: #fff;
      margin-top: 20px;
      border-radius: 10px;
      height: 100%;

      .gocar_header {
        height: 44px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        div {
          line-height: 44px;
          margin-right: 20px;

          a {
            font-size: 12px;
            color: red;
          }
        }
      }

      .goods-card {
        background: #fff;
        width: 330px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .delete-button {
        height: 100%;
      }
    }
  }

  .car_vip {
    width: 100%;
    height: 40px;
    background: #ffe0bd;
    position: fixed;
    display: flex;
    position: fixed;
    bottom: 100px;
    font-size: 12px;
    line-height: 40px;
    justify-content: space-between;


    img {

      width: 12px;
      height: 12px;
      margin: 0 10px;
    }
  }

  .content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 350px;

    .content_img {
      display: flex;
      font-size: 12px;

      img {
        width: 88px;
        height: 88px;
        background: #eee;
      }
    }

    .content_list {
      ul {
        width: 100%;
        height: 35px;
        display: flex;
        flex-wrap: wrap;

        li {
          border: 1px solid #000;
          font-size: 12px;
          line-height: 35px;
          padding: 0 10px;
          margin-right: 10px;
          margin-bottom: 5px;
        }

        .active {
          border: 1px solid red;
        }
      }
    }



  }

  .content_bigbutton {
    background: #b4282d;
    width: 100%;
    height: 50px;
    font-size: 16px;
    color: #eee;
    text-align: center;
    line-height: 50px;
  }

  ::v-deep(.van-swipe-cell__wrapper) {
    display: flex;
  }

  ::v-deep(.van-image__img) {
    background: #eee;
  }

  ::v-deep(.van-submit-bar) {

    bottom: 52px;
  }


}
</style>